<template>
  <div>
    <el-form
      class="filter-container"
      ref="searchData"
      :model="searchData"
      label-width="85px"
    >
      <el-row :gutter="20">
        <el-col :span="7">
          <el-form-item label="成交序号">
            <el-input
              placeholder="请输入内容"
              v-model="searchData.tradeID"
              clearable
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="品名">
            <el-input
              placeholder="请输入内容"
              v-model="searchData.productName"
              clearable
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="合约">
            <el-input
              placeholder="请输入内容"
              v-model="searchData.instrumentID"
              clearable
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="方向">
            <el-select
              v-model="searchData.direction"
              placeholder="请选择"
              style="width:100%;"
              clearable
            >
              <el-option label="全部" value="99"></el-option>
              <el-option label="买入" value="0"></el-option>
              <el-option label="卖出" value="1"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="开/平">
            <el-select
              v-model="searchData.offsetFlag"
              placeholder="请选择"
              style="width:100%;"
              clearable
            >
              <el-option label="全部" value="99"></el-option>
              <el-option label="开仓" value="0"></el-option>
              <el-option label="平仓" value="1"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="成交价">
            <el-input
              placeholder="请输入内容"
              v-model="searchData.price"
              clearable
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="投/保">
            <el-select
              v-model="searchData.hedgeFlag"
              placeholder="请选择"
              style="width:100%;"
              clearable
            >
              <el-option label="全部" value="99"></el-option>
              <el-option label="投机" value="1"></el-option>
              <el-option label="套利" value="2"></el-option>
              <el-option label="套保" value="3"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="成交日期">
            <el-date-picker
              v-model="searchData.tradeDate"
              type="date"
              placeholder="选择日期"
              value-format="yyyy-MM-dd"
              style="width:100%;"
              clearable
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="柜台账号">
            <el-select
              v-model="searchData.realAccountCode"
              placeholder="请选择"
              filterable
              value-key="realAccountCode"
              style="width:100%;"
              @change="selectSubjectItem($event)"
            >
              <el-option
                v-for="item in selectNameList"
                :key="item.RealAccountCode"
                :label="item.RealAccountName"
                :value="{
                  brokerID: item.brokerID,
                  realAccountCode: item.realAccountCode
                }"
              >
                <span style="float: left">{{ item.RealAccountName }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{
                  item.realAccountCode
                }}</span>
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="2">
          <el-button
            type="primary"
            size="mini"
            @click="search"
            style="margin-top:5px"
          >
            <d2-icon name="search" /> 查询
          </el-button>
        </el-col>
      </el-row>
    </el-form>
    <el-table
      :data="tableData"
      border
      fit
      :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        type="selection"
        width="40"
        :selectable="checkSelectable"
      >
      </el-table-column>
      <el-table-column type="index" label="序号"> </el-table-column>
      <el-table-column
        prop="volume"
        label="成交手数"
        sortable
      ></el-table-column>
      <el-table-column
        prop="matchable_volume"
        label="可匹配手数"
        sortable
      ></el-table-column>
      <el-table-column
        prop="productName"
        label="品名"
        sortable
      ></el-table-column>
      <el-table-column
        prop="instrumentID"
        label="合约"
        sortable
      ></el-table-column>
      <el-table-column prop="direction" label="方向" sortable></el-table-column>
      <el-table-column
        prop="offsetFlag"
        label="开/平"
        sortable
      ></el-table-column>
      <el-table-column prop="price" label="成交价" sortable></el-table-column>
      <el-table-column
        prop="turnOver"
        label="成交额"
        sortable
      ></el-table-column>
      <el-table-column
        prop="tradeDate"
        label="成交日期"
        sortable
      ></el-table-column>
      <el-table-column
        prop="hedgeFlag"
        label="投/保"
        sortable
      ></el-table-column>
      <el-table-column
        prop="tradeID"
        label="成交序号"
        sortable
      ></el-table-column>
      <el-table-column
        prop="realAccountCode"
        label="柜台账号"
        sortable
      ></el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="searchData.page"
      :page-size="searchData.pageSize"
      layout="total, prev, pager, next"
      :total="searchData.totalPage"
    >
    </el-pagination>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="closeBtn()" size="mini">选择</el-button>
    </div>
  </div>
</template>
<script>
import { realTraded } from "@/api/url_info.js";
import { return_account } from "@/api/url.js";
export default {
  //柜台账户（策略）
  name: "matchDeal",
  props: ["closeValue", "unable"],
  data() {
    return {
      tableData: [],
      multipleSelection: [],
      selectNameList: [],
      searchData: {
        page: 1, //当前页
        pageSize: 20,
        totalPage: 0,
        operation: "SEL",
        tradeID: "",
        productName: "",
        instrumentID: "",
        direction: "99",
        offsetFlag: "99",
        price: "",
        hedgeFlag: "99",
        tradeDate: "",
        realAccountCode: "",
        brokerID: ""
      }
    };
  },
  created() {
    this.getData();
    this.handle_return_account();
  },
  methods: {
    async getData() {
      let that = this;
      //查询柜台账户成交明细(策略)
      if (that.searchData.tradeDate == null) {
        that.searchData.tradeDate = "";
      }
      if (that.searchData.direction == "") {
        that.searchData.direction = "99";
      }
      if (that.searchData.offsetFlag == "") {
        that.searchData.offsetFlag = "99";
      }
      if (that.searchData.hedgeFlag == "") {
        that.searchData.hedgeFlag = "99";
      }
      await realTraded(that.searchData)
        .then(res => {
          that.tableData = [];
          let data = res.result.results;
          that.searchData.totalPage = res.result.count;
          for (let i = 0; i < data.length; i++) {
            that.tableData[i] = {
              tradeID: data[i]["tradeID"],
              brokerID: data[i]["brokerID"],
              productName: data[i]["productName"],
              instrumentID: data[i]["instrumentID"],
              direction: data[i]["direction"],
              offsetFlag: data[i]["offsetFlag"],
              price: data[i]["price"],
              volume: data[i]["volume"],
              turnOver: data[i]["turnOver"],
              tradeDate: data[i]["tradeDate"],
              hedgeFlag: data[i]["hedgeFlag"],
              realAccountCode: data[i]["realAccountCode"],
              matchable_volume: data[i]["matchable_volume"]
            };
          }
        })
        .catch(err => {
          that.$message.error(err.msg);
        });
    },
    // 查询柜台账号
    handle_return_account() {
      return_account({ account_type: "real" })
        .then(res => {
          this.selectNameList = [];
          var data1 = res.result;
          for (var i = 0; i < data1.length; i++) {
            this.selectNameList[i] = {
              brokerID: data1[i]["BrokerID"],
              realAccountCode: data1[i]["RealAccountCode"],
              RealAccountName: data1[i]["RealAccountName"]
            };
          }
        })
        .catch(err => {
          this.$message.error(err.msg);
        });
    },
    selectSubjectItem(event) {
      this.searchData.brokerID = event.brokerID;
      this.searchData.realAccountCode = event.realAccountCode;
    },
    //禁选
    checkSelectable(row, rowIndex) {
      let arr = [];
      for (let i in this.unable) {
        arr.push(this.unable[i].tradeID);
      }
      if (
        arr.some(el => {
          return el === row.tradeID;
        })
      ) {
        return false;
      } else {
        return true;
      }
    },
    // //处理默认选中当前日期
    // getNowTime() {
    //   var now = new Date();
    //   var year = now.getFullYear(); //得到年份
    //   var month = now.getMonth(); //得到月份
    //   var date = now.getDate(); //得到日期
    //   month = month + 1;
    //   month = month.toString().padStart(2, "0");
    //   date = date.toString().padStart(2, "0");
    //   var defaultDate = `${year}-${month}-${date}`;
    //   console.log(defaultDate);
    //   return defaultDate;
    //   this.$set(this.searchData, "tradeDate", defaultDate);
    // },
    // 每页数
    handleSizeChange(val) {
      this.searchData.pageSize = val;
      this.searchData.page = 1;
      this.getData();
    },
    // 当前页
    handleCurrentChange(val) {
      this.searchData.page = val;
      this.getData();
    },
    //选中的数据
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //查询
    search() {
      this.searchData.page = 1;
      this.getData();
    },
    closeBtn() {
      if (this.closeValue == "matchDeal") {
        this.$emit("closeMatch", this.multipleSelection);
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.dialog-footer {
  margin-left: 90%;
}
.el-form-item {
  margin-bottom: 10px !important;
}
</style>
